<template>
  <div class="mediation-information">
    <div class="mediation-information-item" v-for="item in steps">
      <div class="time">{{item.time}}</div>
      <div class="line-block">
        <div class="point">
          <div class="roundness"></div>
        </div>
        <div class="line"></div>
      </div>
      <div class="info-block">
        <div class="info-title">{{item.title}}</div>
        <div class="info-desc">{{item.desc}}</div>
        <div :style="{background:item.statusColor}" class="status-point"></div>
        <div class="status-text">{{item.statusText}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'MediationInformation',
  data(){
    return{
      steps:[
        {time:'2025-04-17',title:'邻里纠纷',desc:'楼上漏水引发赔偿纠纷',statusText:'未处理',statusColor:'#EA0000'},
        {time:'2025-04-16',title:'家庭纠纷',desc:'老人赡养问题调解',statusText:'处理中',statusColor:'#FED52F'},
        {time:'2025-04-15',title:'经济纠纷',desc:'装修公司未按合同约定完成工程，业主拒绝支付尾款',statusText:'已处理',statusColor:'#52C41A'},
        {time:'2025-04-14',title:'邻里纠纷',desc:'楼上漏水引发赔偿纠纷',statusText:'已处理',statusColor:'#52C41A'},
        {time:'2025-04-13',title:'家庭纠纷',desc:'子女对老人赡养责任分配存在争议，老人生活得不到保障',statusText:'处理中',statusColor:'#FED52F'},
        {time:'2025-04-12',title:'邻里纠纷',desc:'楼上漏水引发赔偿纠纷',statusText:'未处理',statusColor:'#EA0000'},
        {time:'2025-04-11',title:'家庭纠纷',desc:'老人赡养问题调解',statusText:'处理中',statusColor:'#FED52F'},
        {time:'2025-04-10',title:'经济纠纷',desc:'装修公司未按合同约定完成工程，业主拒绝支付尾款',statusText:'已处理',statusColor:'#52C41A'},
        {time:'2025-04-09',title:'邻里纠纷',desc:'楼上漏水引发赔偿纠纷',statusText:'已处理',statusColor:'#52C41A'},
        {time:'2025-04-08',title:'家庭纠纷',desc:'子女对老人赡养责任分配存在争议，老人生活得不到保障',statusText:'处理中',statusColor:'#FED52F'},
      ]
    }
  }
}
</script>
<style scoped lang="scss">
.mediation-information{
  width: 100%;
  height: 100%;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(0,198,255,.3);
  }
  &::-webkit-scrollbar-track{
    border-radius: 3px;
    background: rgba(0,24,48,.3);
  }
  .mediation-information-item{
    width: 100%;
    height: 75px;
    display: flex;
    .time{
      color: #fff;
      font-size: 14px;
    }
    .line-block{
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0 10px;
      .point{
        width: 16.5px;
        height: 16.5px;
        border-radius: 50%;
        background: #043E66;
        display: flex;
        align-items: center;
        justify-content: center;
        .roundness{
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #0AA7FF;
        }
      }
      .line{
        width: 1px;
        height: calc(100% - 16px);
        background: #0AA7FF;
      }
    }
    &:last-child{
      .line{
        background: transparent;
      }
    }
    .info-block{
      width: calc(100% - 78px - 37px);
      height: calc(100% - 20px);
      border-radius: 8px;
      background: #0B3251;
      padding: 0 20px;
      display: flex;
      align-items: center;
      .info-title{
        font-weight: bold;
        color: #1C85FE;
        margin-right: 10px;
      }
      .info-desc{
        color: #fff;
        font-size: 14px;
        width: calc(100% - 62px - 74px - 10px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .status-point{
        border-radius: 50%;
        width: 10px;
        height: 10px;
        margin:0 10px;
      }
      .status-text{
        color: #fff;
        font-size: 14px;
      }
    }
  }
}
</style>
